<script setup>
// 获取商品信息
import axios from "axios";
import { ref, watch } from "vue"; 
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const props = defineProps(["currentTab"]);
const hotBookItem = ref([]);
const mainBook = ref({});
const tabbook = ref([]);

watch(
  () => props.currentTab,
  () => {
    // 当currentTab变化时，重新获取数据
    getHotBookItem();
  }
);

// 导航到详情页
const goToBookDetail = (bookId) => {
  router.push(`/booksDetails/${bookId}`);
};

const getHotBookItem = async () => {
  try {
    let res = await axios.get("/api/hotBookBySection", {
      params: { section: props.currentTab }
    });
    console.log('hotBookBySection返回:', res.data);
    if (res.data.code === 200 && Array.isArray(res.data.data) && res.data.data.length > 0) {
      hotBookItem.value = res.data.data;
      mainBook.value = hotBookItem.value[0];
      tabbook.value = hotBookItem.value.slice(1, 5);
    } else {
      setDefaultData();
    }
  } catch (err) {
    setDefaultData();
  }
};

// 设置默认数据，以防API调用失败
const setDefaultData = () => {
  // 默认数据
  const defaultData = {
    sort: props.currentTab,
    book: [
      {
        id: 1,
        name: "百年孤独",
        price: 55.0,
        coverImg: "https://image12.bookschina.com/2017/20170828/s7554065.jpg",
        font: "《百年孤独》是加西亚·马尔克斯的代表作，也是拉丁美洲魔幻现实主义文学的代表作，被誉为再现拉丁美洲历史社会图景的鸿篇巨著"
      },
      {
        id: 2,
        name: "米格尔在智利的地下行动",
        price: 49.0,
        coverImg: "https://image12.bookschina.com/2019/20190722/1/s8134300.jpg",
        font: ""
      },
      {
        id: 3,
        name: "世界末日之战-企鹅经典",
        price: 59.0,
        coverImg: "https://image12.bookschina.com/2015/20150218/s6755809.jpg",
        font: ""
      },
      {
        id: 4,
        name: "避暑",
        price: 23.0,
        coverImg: "https://image12.bookschina.com/2024/20240903/1/s5708353.jpg",
        font: ""
      },
      {
        id: 5,
        name: "梦中的欢快葬礼和十二个异乡故事",
        price: 35.0,
        coverImg: "https://image12.bookschina.com/2015/20150325/s6882900.jpg",
        font: ""
      }
    ]
  };

  // 设置默认数据
  hotBookItem.value = defaultData.book;
  mainBook.value = hotBookItem.value[0];
  tabbook.value = hotBookItem.value.filter((item, index) => index !== 0);
};

getHotBookItem();
</script>

<template>
  <div class="tabCon">
    <div class="tabConList">
      <div class="mainEditor">
        
        <div class="mainCover">
          <a @click.prevent="goToBookDetail(mainBook.id)" href="javascript:void(0);" :title="mainBook.name">
            <img :src="mainBook.coverImg" alt="主图书" />
          </a>
        </div>
        <div class="mainText">
          <h2>
            <a @click.prevent="goToBookDetail(mainBook.id)" href="javascript:void(0);">{{ mainBook.name }}</a>
          </h2>
          <div class="priceWrap">
            <span class="price">¥{{ mainBook.price }}</span>
          </div>
          <div class="mainFont">
            <p>
              {{ mainBook.font }}
            </p>
          </div>
        </div>
      </div>
      
      <div class="tabbook">
        <ul class="clearfix">
          
          <li v-for="(item, index) in tabbook" :key="index">
            <div class="Img">
              <a @click.prevent="goToBookDetail(item.id)" href="javascript:void(0);">
                <img :src="item.coverImg" :alt="item.name" />
              </a>
            </div>
            <div class="name">
              <a @click.prevent="goToBookDetail(item.id)" href="javascript:void(0);" :title="item.name">{{ item.name }}</a>
            </div>
            <div class="priceWrap">
              <span class="price">¥{{ item.price }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  box-sizing: border-box;
}
.hotBook .tabCon {
  background: #fff;
}
.tabConList {
  position: relative;
  /* display: none; */
}
.tabConList.cur {
  display: block;
}
.mainEditor {
  overflow: hidden;
  padding: 15px 15px 0;
  height: 174px;
  border-bottom: 1px solid #eef1f9;
}

.mainEditor .mainCover {
  float: left;
  height: 160px;
  width: 189px;
  text-align: center;
  display: inline;
  position: relative;
}
.mainEditor .mainCover a {
  display: block;
  height: 160px;
  background: #fff;
}
a {
  text-decoration: none;
  color: #333;
}
.mainEditor .mainCover a img {
  max-height: 160px;
  max-width: 160px;
}

img {
  border: 0;
  vertical-align: middle;
}
.mainEditor .mainText {
  /* float: left; */
  width: 495px;
  display: inline;
  overflow: hidden;
}
.mainEditor .mainText h2 {
  /* margin-top: 10px; */
  line-height: 30px;
}
.mainEditor .mainText h2 a {
  font-size: 16px;
  color: #000;
  font-family: "Microsoft YaHei";
  text-decoration: none;
  font-weight: bold;
}
.mainEditor .priceWrap {
  overflow: hidden;
  line-height: 30px;
}
.mainEditor .priceWrap span {
  float: left;
  font-size: 18px;
  font-family: "Microsoft YaHei";
}
.mainEditor .priceWrap .price {
  color: #e60000;
  margin-left: 11px;
}
.mainEditor .mainFont {
  height: 96px;
  overflow: hidden;
}
.mainEditor p {
  color: #666666;
  line-height: 24px;
  text-indent: 2em;
  margin-top: 1px;
  font-size: 12px;
  font-family: "宋体";
}

.tabbook {
  padding: 0 1px;
  margin-top: 10px;
}
.tabbook ul {
  overflow: hidden;
}
.tabbook ul li {
  float: left;
  width: 177px;
  overflow: hidden;
  position: relative;
}
.tabbook .Img {
  text-align: center;
  margin-top: 7px;
  height: 158px;
}
.tabbook .Img a {
  display: block;
}
.tabbook .Img img {
  max-height: 158px;
  max-width: 158px;
}
.tabbook .name {
  padding: 10px 15px 0;
  line-height: 18px;
  height: 48px;
  overflow: hidden;
}
.tabbook .name a {
  color: #333333;
  font-size: 12px;
  text-decoration: none;
}

.tabbook .priceWrap {
  overflow: hidden;
  padding: 4px 15px 15px 15px;
  line-height: 20px;
}
.tabbook .priceWrap .price {
  color: #e60000;
  font-size: 16px;
}
.tabItem .tabbook .priceWrap span {
  float: left;
  font-family: "Microsoft YaHei";
}
/* ///////////////////////// */

.mainCover a, .tabbook .Img a, .tabbook .name a, .mainEditor .mainText h2 a {
  cursor: pointer;
}

</style>
